<!--
 * @Descripttion:  新增/编辑招商经理
 * @version: 
 * @Author: lehaixia
 * @Date: 2023-04-18 16:42:57
 * @LastEditors: lehaixia
 * @LastEditTime: 2023-05-17 13:52:36
-->
<template>
  <div class="has-foot-pb edit">
    <Cell
      title="招商经理AD域账号"
      :modelValue="formData.managerAccount"
      divider
      :right="true"
      :isInput="false"
      input-align="right"
      placeholder="请选择"
      @right="onClickToChoice"
    />
    <Cell
      title="招商经理姓名"
      v-model="formData.managerName"
      divider
      :right="false"
      disabled
      :isInput="false"
      input-align="right"
      placeholder="输入招商经理姓名"
    />
    <Cell
      title="招商经理电话"
      v-model="formData.managerPhone"
      divider
      :right="false"
      :isInput="true"
      input-align="right"
      type="tel"
      placeholder="输入招商经理电话"
    />

    <div class="ctm-content-foot">
      <div class="btn radius-larg ctm-btn-main" @click="onSubmit">确认</div>
    </div>
  </div>
</template>
<script lang="ts">
  import { reactive, toRefs, defineComponent, getCurrentInstance, nextTick } from 'vue'
  import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
  import { useStore } from 'vuex'
  import Cell from '@/components/Cell/index.vue'
  import { save, detail } from '@/apis/attractInvestment/leasingManager'
  import { isChange } from '@/utils'

  export default defineComponent({
    name: 'LeasingManagerEdit',
    components: { Cell },
    setup() {
      const $route = useRoute()
      const $router = useRouter()
      const $store = useStore()

      const { proxy, type }: any = getCurrentInstance()

      const datas = reactive({
        id: $route.query.id || '',
        dictParams: { query: { appCode: 'slm', domainCode: 'marketing' }, type: 0 },
        formData: {
          managerAccount: '',
          managerName: '',
          managerPhone: ''
        },
        originalData: '', // 原始数据 用于对比值是否发生变化
        submiting: false,
        isEditBack: false
      })

      datas.originalData = JSON.stringify(datas.formData)

      onBeforeRouteLeave((to: any, from, next) => {
        const instanceName = type?.name
        if (to.name === 'LeasingManager') {
          $store.commit('routerKeep/removeCache', instanceName)
          if (datas.isEditBack || isChange(datas.formData, datas.originalData)) next()
          else {
            // 阻止返回
            proxy.$dialog
              .confirm({
                title: '当前编辑数据未保存，是否确认退出？',
                theme: 'round-button',
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                showCancelButton: true,
                closeOnPopstate: false
              })
              .then(() => {
                next()
              })
              .catch(() => {
                next(false)
              })
          }
        } else {
          $store.commit('routerKeep/resetCache', instanceName)
          next()
        }
      })

      const getDetail = () => {
        const id = `${datas.id}`
        if (!id) return
        detail(id).then((res) => {
          const { managerName, managerPhone, managerAccount } = res.data
          const data: any = datas.formData
          data.managerAccount = managerAccount
          data.managerName = managerName
          data.managerPhone = managerPhone
          datas.formData = data
          datas.originalData = JSON.stringify(data)
        })
      }
      getDetail()

      proxy.$SimpleEvents.registerEvent('updateManager', (row: any) => {
        const data: any = datas.formData
        data.managerAccount = row.account
        data.managerName = row.userName
        data.managerPhone = row.phone
        datas.formData = data
      })

      const onSubmit = () => {
        if (datas.submiting) return
        const data = {
          id: datas.id,
          ...datas.formData
        }

        if (!data.managerAccount) {
          proxy.$toast('请选择招商经理')
          return
        }
        datas.submiting = true
        save(data)
          .then((res: any) => {
            if (res.success === 1) {
              proxy.$toast(datas.id ? '编辑成功' : '新增成功')
              proxy.$SimpleEvents.emit('refreshCustomerChangeItem', data.id)

              nextTick(() => {
                datas.isEditBack = true
                $router.goBack()
              })
              datas.submiting = false
            }
          })
          .catch((e) => {
            if (e) proxy.$toast(e)
            datas.submiting = false
          })
      }

      const onClickToChoice = () => {
        if (datas.id) return
        $router.push({
          path: '/leasingManager/choice'
        })
      }

      return {
        ...toRefs(datas),
        onSubmit,
        onClickToChoice
      }
    }
  })
</script>
<style lang="less" scoped>
  .edit {
    padding-top: 8px;
  }
</style>
